<template>
  <div class="form-model-box">
    <a-form-model ref="form" :model="model" :rules="validatorRules">
      <a-form-model-item required prop="username">
        <a-input v-model="model.username" size="large" placeholder="请输入帐户名">
          <a-icon slot="prefix" type="user" :style="{ fontSize: '18px', color: 'rgba(0,0,0,.55)' }" />
        </a-input>
      </a-form-model-item>
      <a-form-model-item required prop="password">
        <a-input
          v-model="model.password"
          size="large"
          type="password"
          autocomplete="false"
          placeholder="请输入密码"
        >
          <a-icon slot="prefix" type="lock" :style="{ fontSize: '18px', color: 'rgba(0,0,0,.55)' }" />
        </a-input>
        <div style="color: red;font-size: 15px;position:relative;padding: 0 10px">
          <span style="position: absolute;top: 0" v-if="pass">{{ text }}</span>
        </div>
      </a-form-model-item>

      <!-- <a-row :gutter="0" class="checkcodeBox">
        <a-col :span="24" class="inputBox"> -->
          <a-form-model-item required prop="inputCode">
            <a-input v-model="model.inputCode" size="large" type="text" placeholder="请输入验证码">
              <a-icon slot="prefix" type="safety-certificate" :style="{ fontSize: '18px', color: 'rgba(0,0,0,.55)' }" />
              <div slot="suffix" style="text-align: right" class="imgBox">
                <img v-if="requestCodeSuccess" :src="randCodeImage" @click="handleChangeCheckCode" />
                <img v-else src="~@/assets/checkcode.png" @click="handleChangeCheckCode" />
              </div>
            </a-input>
          </a-form-model-item>
        <!-- </a-col> -->
        <!-- <a-col :span="8" style="text-align: right" class="imgBox">
          <img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage" @click="handleChangeCheckCode" />
          <img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode" />
        </a-col> -->
      <!-- </a-row> -->
    </a-form-model>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import Vue from 'vue'
import { mapActions } from 'vuex'

export default {
  name: 'LoginAccount',
  data() {
    return {
      pass:false,
      text:undefined,
      requestCodeSuccess: false,
      randCodeImage: '',
      currdatetime: '',
      loginType: 0,
      model: {
        username: '',
        password: '',
        inputCode: ''
      },
      validatorRules: {
        username: [{ required: true, message: '请输入用户名!' }, { validator: this.handleUsernameOrEmail }],
        password: [
          {
            required: true,
            message: '请输入密码!',
            validator: 'click'
          }
        ],
        inputCode: [
          {
            required: true,
            message: '请输入验证码!'
          }
        ]
      }
    }
  },
  created() {
    this.handleChangeCheckCode()
  },
  watch:{
    model:{
      deep:true,
      handler(a,b){
        if(this.model.password === ''){
          this.pass = false
        }
      }
    }
  },
  methods: {
    ...mapActions(['Login']),
    /**刷新验证码*/
    handleChangeCheckCode() {
      this.currdatetime = new Date().getTime()
      this.model.inputCode = ''
      getAction(`/sys/randomImage/${this.currdatetime}`)
        .then(res => {
          if (res.success) {
            this.randCodeImage = res.result
            this.requestCodeSuccess = true
          } else {
            this.$message.error(res.message)
            this.requestCodeSuccess = false
          }
        })
        .catch(() => {
          this.requestCodeSuccess = false
        })
    },
    handleUserPassword(val){
      console.log(val)
      this.pass = true
      this.text = val
    },
    // 判断登录类型
    handleUsernameOrEmail(rule, value, callback) {
      const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
      if (regex.test(value)) {
        this.loginType = 0
      } else {
        this.loginType = 1
      }
      callback()
    },
    /**
     * 验证字段
     * @param arr
     * @param callback
     */
    validateFields(arr, callback) {
      let promiseArray = []
      for (let item of arr) {
        let p = new Promise((resolve, reject) => {
          this.$refs['form'].validateField(item, err => {
            if (!err) {
              resolve()
            } else {
              reject(err)
            }
          })
        })
        promiseArray.push(p)
      }
      Promise.all(promiseArray)
        .then(() => {
          callback()
        })
        .catch(err => {
          callback(err)
        })
    },
    acceptUsername(username) {
      this.model['username'] = username
    },
    //账号密码登录
    handleLogin(rememberMe) {
      this.validateFields(['username', 'password', 'inputCode'], err => {
        if (!err) {
          let loginParams = {
            username: this.model.username,
            password: this.model.password,
            captcha: this.model.inputCode,
            checkKey: this.currdatetime,
            remember_me: rememberMe
          }
          console.log('登录参数', loginParams)
          this.Login(loginParams)
            .then(res => {
              console.log(res)
              this.$emit('success', res.result)
            })
            .catch(err => {
              this.$emit('fail', err)
            })
        } else {
          this.$emit('validateFail')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.form-model-box {
  /deep/.ant-form-item {
    margin-bottom: 30px;
    .ant-input {
      border-width: 0;
      border-bottom-width: 1px;
      border-radius: 0;
      &:focus,&:hover {
        // border-width: 0 !important;
        // border-bottom-width: 1px;
        border-right-width: 0 !important;
        box-shadow: inherit;
        // border-color: inherit;
      }
    }
  }
}
/deep/.ant-input-affix-wrapper .ant-input:not(:first-child) {
  padding-left: 40px;
}
// /deep/ .inputBox .ant-form-item{
//   margin-bottom: 0!important;
// }
/deep/.ant-form-explain{
  margin-top: 1vh;
  font-size: 1.7vh;
}
/deep/ .imgBox {
  width: 12vh;
  margin-left: 2vh;
  margin-top: .3vh;
  img {
    width: 100%;
  }
}
</style>
